<template>
  <div class="about">
    <div class="tab">
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row>
          <el-col :span="3">
            <el-select
              size="small"
              v-model="typetValue"
              placeholder="请选择台球类型"
            >
              <el-option
                v-for="item in options"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              size="small"
              v-model="stateValue"
              placeholder="请选择台球状态"
            >
              <el-option
                v-for="item in states"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-input
              size="small"
              v-model="searchName"
              placeholder="请输入查找的桌名"
            >
              <el-button
                slot="append"
                @click="searchByName"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-button
              size="small"
              icon="el-icon-circle-plus-outline"
              type="primary"
              @click="dialogFormVisible = true"
              >添加球桌</el-button
            >
          </el-col>
        </el-row>
      </el-card>
      <el-table :data="paginationList" border>
        <el-table-column
          type="index"
          align="center"
          prop="id"
          width="101"
        ></el-table-column>
        <el-table-column
          prop="courts_table"
          align="center"
          label="桌名"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="courts_type_name"
          align="center"
          label="类型"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="courts_unit_price"
          align="center"
          label="价格(/小时)"
          width="200"
        ></el-table-column>
        <el-table-column
          label="状态"
          width="170"
          align="center"
          prop="courts_status_id"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.courts_status_id === 0" type="success"
              >无人使用</el-tag
            >
            <el-tag v-if="scope.row.courts_status_id === 1" type="warning"
              >正在使用</el-tag
            >
            <el-tag v-if="scope.row.courts_status_id === 2" type="info"
              >维护中</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="operate" align="center" width="300" label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              type="text"
              @click="openDialogFormUpdate(scope.row)"
              icon="el-icon-edit"
              size="mini"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBlock" style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[7, 15, 20, 25]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next,jumper"
          :total="billiardTableList.length"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 添加台球模态框 -->
    <el-dialog title="添加台球" :visible.sync="dialogFormVisible" width="35%">
      <!-- 对话框主体区域 -->
      <el-form
        :model="addBilliardObj"
        :rules="addBilliardRules"
        ref="addBilliardFormRef"
        label-width="100px"
      >
        <el-form-item label="台球号:" prop="courts_table">
          <el-input
            v-model="addBilliardObj.courts_table"
            placeholder="请输入台球号"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select
            style="width: 100%"
            v-model="addBilliardObj.courts_type_name"
            placeholder="请选择台球类型"
            @change="typeSelect()"
          >
            <el-option
              v-for="item in filteredOptions"
              :key="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格(/小时):" prop="courts_unit_price">
          <el-input
            v-model="addBilliardObj.courts_unit_price"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态:" prop="courts_status_name">
          <el-input
            v-model="addBilliardObj.courts_status_name"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="ai_dialog_close()">取 消</el-button>
        <el-button type="primary" @click="addBilliardInfo()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改模态框 -->
    <el-dialog
      title="修改台球信息"
      :visible.sync="dialogFormUpdate"
      :before-close="update_dialog_close"
      width="40%"
    >
      <!-- 对话框主体区域 -->
      <el-form
        :model="updateBilliardObj"
        :rules="addBilliardRules"
        ref="addBilliardFormRef"
        label-width="100px"
      >
        <el-form-item label="台球号:" prop="courts_table">
          <el-input
            v-model="updateBilliardObj.courts_table"
            placeholder="请输入台球号"
            :disabled="updateBilliardObj.courts_status_name === '正在使用'"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select
            style="width: 100%"
            v-model="updateBilliardObj.courts_type_name"
            placeholder="请选择台球类型"
            @change="typeSelect()"
            :disabled="updateBilliardObj.courts_status_name === '正在使用'"
          >
            <el-option
              v-for="item in filteredOptions"
              :key="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格(/小时):" prop="courts_unit_price">
          <el-input
            v-model="updateBilliardObj.courts_unit_price"
            :disabled="updateBilliardObj.courts_status_name === '正在使用'"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态:" prop="courts_status_name">
          <el-select
            style="width: 100%"
            v-model="updateBilliardObj.courts_status_name"
            placeholder="请选择台球类型"
            :disabled="updateBilliardObj.courts_status_name === '正在使用'"
          >
            <el-option v-for="item in filteredStates" :key="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="update_dialog_close()">取 消</el-button>
        <el-button type="primary" @click="updateBilliardInfo()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typetValue: "所有",
      stateValue: "所有",
      options: ["所有", "中8台球", "斯诺克"],
      states: ["所有", "无人使用", "正在使用", "维修中"],
      searchName: "", //搜索的名字
      billiardTableList: [], //台球桌集合
      paginationList: [], //分页后的数据
      currentPage: 1, //当前页码
      pageSize: 7, //每页的数据条数
      dialogFormVisible: false,
      dialogFormUpdate: false,
      addBilliardObj: {
        courts_table: "",
        courts_type_name: "",
        courts_unit_price: "",
        courts_status_name: "无人使用",
      },
      updateBilliardObj: {
        court_id: "",
        courts_table: "",
        courts_type_name: "",
        courts_unit_price: "",
        courts_status_name: "无人使用",
      },
      addBilliardRules: {
        courts_table: [
          { required: true, message: "请输入您的台球号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在3到10个字符之间",
            trigger: "blur",
          },
        ],
        courts_status_name: [
          {
            required: true,
            message: "请选择台球状态",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  methods: {
    // 搜索
    searchByName() {
      if (
        this.searchName === "" &&
        this.typetValue === "所有" &&
        this.stateValue === "所有"
      ) {
        this.getlivestockInfo();
      } else {
        var params = new URLSearchParams();
        params.append("searchName", this.searchName);
        params.append("selectTypeValue", this.typetValue);
        params.append("selectStateValue", this.stateValue);
        this.$axios
          .post("/getCourtsByInfo", params) //通过URL传参
          .then((res) => {
            //请求成功
            this.billiardTableList = res.data;
            //刷新分页
            this.getPageData();
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    // 添加台球信息
    addBilliardInfo() {
      this.$refs.addBilliardFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请正确填写添加台球信息");
        await this.$axios
          .post("http://localhost:8080/addCourts", this.addBilliardObj)
          .then((res) => {
            this.$message.success({
              type: "success",
              message: res.data,
            });
            this.getlivestockInfo();
            this.ai_dialog_close();
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPageData();
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPageData();
    },
    // 获取全部数据
    getlivestockInfo() {
      let that = this;
      that.$axios
        .get("/getCourtsAll") //补上后台接口即可
        .then((res) => {
          // 请求成功
          that.billiardTableList = res.data;
          // 获取页面数据后立马调用下面函数
          that.getPageData();
          return;
        })
        .catch((error) => {
          // 请求失败
          console.log("请求失败");
          console.log(error);
        });
    },
    // 获取分页之后的数据
    getPageData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      this.paginationList = this.billiardTableList.slice(start, end);
    },
    // 下拉列表选择改变事件
    changeSelect() {
      if (this.selectValue === "所有") this.getlivestockInfo();
      else {
        let courts_type_id;
        if (this.selectValue === "中8台球") courts_type_id = 1;
        else if (this.selectValue === "斯诺克") courts_type_id = 2;
        let that = this;
        that.$axios
          .get(`/searchCourtsByStatus?courts_type_id=${courts_type_id}`) //补上后台接口即可
          .then((res) => {
            // 请求成功
            that.billiardTableList = res.data;
            // 获取页面数据后立马调用下面函数
            that.getPageData();
          })
          .catch((error) => {
            // 请求失败
            console.log("请求失败");
            console.log(error);
          });
      }
    },
    //修改
    updateBilliardInfo() {
      this.$refs.addBilliardFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请正确填写修改台球信息");
        await this.$axios
          .post("/updateCourts", this.updateBilliardObj)
          .then((res) => {
            this.$message.success({
              type: "success",
              message: res.data,
            });
            this.getlivestockInfo();
            this.update_dialog_close();
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    // 清空修改添加模态框
    clearAddDilog() {
      this.addBilliardObj.courts_table = "";
      this.addBilliardObj.courts_type_name = "";
      this.addBilliardObj.courts_unit_price = "";
    },
    // 清空修改模态框
    clearUpdateDilog() {
      this.updateBilliardObj.court_id = " ";
      this.updateBilliardObj.courts_table = " ";
      this.updateBilliardObj.courts_type_name = " ";
      this.updateBilliardObj.courts_unit_price = " ";
      this.updateBilliardObj.courts_status_name = " ";
    },
    // 打开修改模态框
    openDialogFormUpdate(row) {
      this.dialogFormUpdate = true;
      this.updateBilliardObj.court_id = row.court_id;
      this.updateBilliardObj.courts_table = row.courts_table;
      this.updateBilliardObj.courts_type_name = row.courts_type_name;
      this.updateBilliardObj.courts_unit_price = row.courts_unit_price;
      this.updateBilliardObj.courts_status_name = row.courts_status_name;
    },
    // 关闭修改添加模态窗
    ai_dialog_close() {
      this.clearAddDilog();
      this.dialogFormVisible = false;
      this.$refs["addBilliardFormRef"].clearValidate();
    },
    update_dialog_close() {
      this.clearUpdateDilog();
      this.dialogFormUpdate = false;
      // this.$refs.updateUserRules.clearValidate();
      this.$refs["addBilliardFormRef"].clearValidate();
    },
    //自定义验证
    checkPrice(rule, value, callback) {
      if (value === "") {
        callback(new Error("价格不能为空"));
      } else if (isNaN(value) || value < 10) {
        callback(new Error("价格必须在10块以上"));
      } else {
        callback();
      }
    },
    typeSelect() {
      if (
        this.addBilliardObj.courts_type_name === "中8台球" ||
        this.updateBilliardObj.courts_type_name === "中8台球"
      ) {
        this.addBilliardObj.courts_unit_price = "30";
        this.updateBilliardObj.courts_unit_price = "30";
      } else if (
        this.addBilliardObj.courts_type_name === "斯诺克" ||
        this.updateBilliardObj.courts_type_name === "斯诺克"
      ) {
        this.addBilliardObj.courts_unit_price = "60";
        this.updateBilliardObj.courts_unit_price = "60";
      }
    },
  },
  mounted() {
    this.getlivestockInfo();
  },
  computed: {
    filteredOptions() {
      return this.options.filter(
        (option, index) => index > 0 && option !== "所有"
      );
    },
    filteredStates() {
      return this.states.filter(
        (states, index) =>
          index > 0 && states !== "所有" && states !== "正在使用"
      );
    },
  },
};
</script>
<style scoped>
.paginationBlock {
  margin-left: 90px;
}

.el-card .el-col {
  margin-right: 8px;
}

.allocationRoleDialog .el-dialog__body {
  padding: 15px 35px;
}
</style>
